<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">

	<title>Patrones de Diseño</title>

	<!--link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'-->

	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
	<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->


	<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>

<body>
	<div class="menu">
		<div class="container clearfix">

			<div id="logo" class="grid_2">
				<img src="images/logo.png">
			</div>
			<h3 class="logo-title grid_5">Patrones de Diseño Creacionales</h3>
			<div id="nav" class="grid_5 omega">
				<ul class="navigation">
					<li data-slide="1">Inicio</li>
					<li data-slide="2">Evaluación</li>
					<li class="end" data-slide="3" style="display:none;">Resultados</li>
				</ul>
			</div>
		</div>
		<hr/>
	</div>

	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
		<div class="container clearfix">
			<div id="content" class="grid_7">
				<h2>Evaluación</h2>
				<h1><strong>Patrones de Diseño</strong></h1><p>.</p>
				<h2>Creacionales</h2>
				<h3>Autor(es): Fernando Morales, Luis Zárate</h3>
				<h1> </h1>

				<h2>Objetivos:</h2>
				<ul class="norm_list">
					<li>
						Calificar el nivel de conocimientos sobre los patrones de diseño de software de tipo
						creacional.
					</li>
					<li>
						Juzgar la capacidad de predicción de soluciones de software a través del uso de patrones
						de diseño creacionales.
					</li>
					<li>
						Valorar competencias sobre el entendimiento de los distintos patrones de diseño
						creacionales.
					</li>
					<li>
						Evaluar el diseño de los distintos patrones creacionales de software.
					</li>
				</ul>
				<a href="#" data-slide="2" class ="button">Iniciar Evaluación »</a>

			</div>

			<div id="decorative" class="grid_5 omega">
				<img src="images/JavaIcon.png" style="margin-left:80px;"/>
			</div>

		</div>
	</div>

	<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
		<div class="container clearfix">

			<div id="content" class="grid_12">
				<section class='slides layout-regular template-default'>

					<article>
						<h5 style="margin-top: 0 !important; text-align:justify">
							1. Los patrones de diseño de software se dividen en tres categorías (Creacionales,
							Estructurales y de Comportamiento), A partir del siguiente listado de patrones seleccione los pertenecientes a la categoría creacional.
						</h5>
						<form id="pt1">
							<div class="left">
								<p>
									<input id="element_1_1" name="element_1_1" class="element checkbox" type="checkbox" value="1" />
									<label class="choice" for="element_1_1">Proxy</label>
								</p>
								<p>
									<input id="element_1_2" name="element_1_2" class="element checkbox" type="checkbox" value="2" />
									<label class="choice" for="element_1_2">Abstract Factory</label>
								</p>
								<p>
									<input id="element_1_3" name="element_1_3" class="element checkbox" type="checkbox" value="3" />
									<label class="choice" for="element_1_3">Adapter</label>
								</p>
								<p>
									<input id="element_1_4" name="element_1_4" class="element checkbox" type="checkbox" value="4" />
									<label class="choice" for="element_1_4">Builder</label>
								</p>
								<p>
									<input id="element_1_5" name="element_1_5" class="element checkbox" type="checkbox" value="5" />
									<label class="choice" for="element_1_5">State</label>
								</p>
							</div>
							<div class="right">
								<p>
									<input id="element_1_6" name="element_1_6" class="element checkbox" type="checkbox" value="6" />
									<label class="choice" for="element_1_6">Singleton</label>
								</p>
								<p>
									<input id="element_1_7" name="element_1_7" class="element checkbox" type="checkbox" value="7" />
									<label class="choice" for="element_1_7">Facade</label>
								</p>
								<p>
									<input id="element_1_8" name="element_1_8" class="element checkbox" type="checkbox" value="8" />
									<label class="choice" for="element_1_8">Observer</label>
								</p>
								<p>
									<input id="element_1_9" name="element_1_9" class="element checkbox" type="checkbox" value="9" />
									<label class="choice" for="element_1_9">FactoryMethod</label>
								</p>
								<p>
									<input id="element_1_10" name="element_1_10" class="element checkbox" type="checkbox" value="10" />
									<label class="choice" for="element_1_10">Composite</label>
								</p>
							</div>
						</form>
						<span class="grade" id="grade1"></span>
						<p><a href="#" id="save1" style="float:right" class="btn">Revisar</a></p>
					</article>

					<article>
						<h5 style="margin-top: 0 !important;">
							2. Un aeropuerto requiere un sistema para controlar datos correspondientes a vuelos comerciales, el aeropuerto tiene una única torre de control encargada de controlar los movimientos aéreos las 24 horas del día, todos los días de la semana. De todos los artefactos derivados del modelo del aeropuerto a usted le solicitan realizar el diseño de la torre de control. ¿Qué patrón de diseño solucionaría la necesidad de modelar una única torre de control?
						</h5>
						<form id="pt2" style="height:50%">
							<div class="left">
								<p><input name="radiogroup" type="radio" value="Builder"><label>Builder</label></p>
								<p><input name="radiogroup" type="radio" value="State"><label>State</label></p>
								<p><input name="radiogroup" type="radio" value="Adapter"><label>Adapter</label></p>
							</div>
							<div class="right">
								<p><input name="radiogroup" type="radio" value="Singleton"><label>Singleton</label></p>
								<p><input name="radiogroup" type="radio" value="Facade"><label>Facade</label></p>
								<p><input name="radiogroup" type="radio" value="AbstractFactory"><label>AbstractFactory</label></p>
							</div>
						</form>
						<span class="grade" id="grade2"></span>
						<p><a href="#"id="save2" style="float:right" class="btn">Revisar</a></p>
					</article>

					<article>
						<h5 style="margin-top: 0 !important;">
							3. El siguiente diagrama de clases es la solución propuesta por Java para la creación de
							drivers que permitan la conexión con diferentes base de datos, con respecto a el diagrama
							determine que patrón de diseño está resolviendo el sistema.
						</h5>
						<table>
							<tr>
								<td style="width:65%;">
									<img src="images/uml1.png"/>
								</td>
								<td style="vertical-align:top !important;">
									<form id="pt3" style="height:50%">
										<div>
											<p><input name="radiogroup2" type="radio" value="Singleton"><label>Singleton</label></p>
											<p><input name="radiogroup2" type="radio" value="Abstract Factory"><label>Abstract Factory</label></p>
											<p><input name="radiogroup2" type="radio" value="Factory Method"><label>Factory Method</label></p>
											<p><input name="radiogroup2" type="radio" value="Builder"><label>Builder</label></p>
											<p><input name="radiogroup2" type="radio" value="State"><label>State</label></p>
										</div>
									</form>
									<span class="grade" id="grade3"></span>
									<p><a href="#" id="save3" style="float:right" class="btn">Revisar</a></p>
								</td>
							</tr>
						</table>
					</article>

					<article>
						<h5 style="margin-top: 0 !important;">
							4. En cuál de los siguientes enunciados la solución es el uso de patrón de diseño conocido como Builder:
						</h5>

						<form id="pt4" style="height:70%">
							<div style="font-size:10px !important; margin-top:10px;">
								<p><input name="radiogroup3" type="radio" value="1">
									<label>
										Una pizzería requiere un sistema de información que le permita almacenar datos sobre
										la construcción de los distintos tipos de pizzas (hawaiana, pollo, picante, carnes, etc.), se
										conoce que el proceso de preparación es el mismo de cada tipo de pizza lo único que varía
										son sus ingredientes.
									</label>
								</p>
								<p>
									<input name="radiogroup3" type="radio" value="2">
									<label>
										Una fábrica de unidades electrónicas desea un sistema de información sobre cada uno de
										sus elementos electrónicos, requiere consignar información sobre los elementos básicos
										que componen sus circuitos y los circuitos que componen sus electrodomésticos, con el fin
										de determinar la cantidad de compontes de cada elemento.
									</label>
								</p>
								<p>
									<input name="radiogroup3" type="radio" value="3">
									<label>
										Una sistema bancario requiere del desarrollo de una aplicación que centralice todas las
										funcionalidades de las distintas aplicaciones con las que cuenta (sistema de nómina,
										sistema de contabilidad, sistema de información al cliente, sistema de seguros, sistema de
										cuentas bancarias).
									</label>
								</p>
								<p><input name="radiogroup3" type="radio" value="4">
									<label>
										La embajada de los Estados Unidos requiere un sistema que controle la información del
										estado de las visas, se ha identificado que las visas pasan por distintos estados (en trámite,
										aprobada, rechaza, vigente, etc.), dependiendo de los respectivos análisis dados por los
										funcionarios de la embajada es posible cambiar de estado las visas siempre y cuando se
										cumplan con un conjunto de circunstancias definidas en cada estado.
									</label>
								</p>
							</div>
						</form>
						<span class="grade" id="grade4"></span>
						<p><a href="#" id="save4" style="float:right" class="btn">Revisar</a></p>
					</article>

					<article>
						<h5 style="margin-top: 0 !important;">
							5. Cuál es la intención del uso los tipos de patrón de diseño creacionales?
						</h5>

						<form id="pt5" style="height:60%">
							<div style="font-size:10px !important; margin-top:50px; margin-left:20px;">
								<p><input name="radiogroup2" type="radio" value="1">
									<label>
										Representar objetos complejos (listas, colecciones y árboles) como objetos con interfaces convenientes.
									</label>
								</p>
								<p><input name="radiogroup4" type="radio" value="2">
									<label>
										Encapsular las opciones de comportamiento  de  la  aplicación  y permitir  que  ese  comportamiento  varíe durante la ejecución.
									</label>
								</p>
								<p>
									<input name="radiogroup4" type="radio" value="3">
									<label>
										Variar y controlar la creación de objetos, incluida la coordinación de familias de objetos.
									</label>
								</p>
								<p><input name="radiogroup4" type="radio" value="4">
									<label>
										Asegurar un máximo de una instancia creada por la máquina virtual de Java.
									</label>
								</p>
								<p><input name="radiogroup4" type="radio" value="5">
									<label>
										Definir un método estándar para crear un objeto, aparte del constructor.
									</label>
								</p>
							</div>
						</form>
						<span class="grade" id="grade5"></span>
						<p><a href="#"id="save5" style="float:right" class="btn">Revisar</a></p>
					</article>

					<article>
						<h5 style="margin-top: 0 !important;">
							6. A partir del siguiente listado clasifique cada uno de los patrones según su nivel arratrando cada patrón en su correspondiente nivel.
						</h5>
						<p></p>
						<div class="grid_12">

							<div class="grid_8">
								<p>Clase</p>
								<ul id="sortable2a" class="sortable">
								</ul>
								<p>Componente</p>
								<ul id="sortable2b" class="sortable" >
								</ul>
								<p>Objeto</p>
								<ul id="sortable2c" class="sortable" >
								</ul>
							</div>
							<div class="grid_3" style="margin-top:40px;">
								<ul id="trash_list2" class="trash_list dropped">
									<li>Singleton</li>
									<li>Abstract Factory</li>
									<li>Factory Method</li>
									<li>Builder</li>
								</ul>
							</div>
						</div>
						<span class="grade" id="grade6"></span>
						<p><a href="#"id="save6" style="float:right; margin-top:10px !important" style="margin-top:20px;" class="btn">Revisar</a></p>
					</article>

					<article>
						<h5 style="margin-top: 0 !important;">
							7. Que patrón de diseño proporciona una interfaz creador y una interfaz producto:
						</h5>
						<form id="pt7" style="height:50%">
							<div>
								<p><input name="radiogroup5" type="radio" value="1"><label>Factory Method</label></p>
								<p><input name="radiogroup5" type="radio" value="2"><label>Builder</label></p>
								<p><input name="radiogroup5" type="radio" value="3"><label>Singleton</label></p>
								<p><input name="radiogroup5" type="radio" value="4"><label> Abstract Factory</label></p>
								<p><input name="radiogroup5" type="radio" value="5"><label>Proxy</label></p>
							</div>
						</form>
						<span class="grade" id="grade7"></span>
						<p><a href="#"id="save7" style="float:right" class="btn">Revisar</a></p>
					</article>

					<article>
						<form id="pt8a">
						<h5 style="margin-top: 0 !important;">
							8. Asocie el diagrama de clases con un patrón de diseño en la lista desplegable.
						</h5>
						<table style="text-align:center; vertical-align:top">
							<tr>
								<td style="width:48%;">
									<h5>a.</h5>
									<img src="images/uml-factMeth.png"/>
									<div>
										<select form="pt8">
											<option value="1" selected="selected">Singleton</option>
											<option value="2">Builder</option>
											<option value="3">Factory Method</option>
											<option value="4">Abstract Factory</option>
										</select>
									</div>
								</td>
								<td>
									<h5>b.</h5>
									<img src="images/uml-absFact.png"/>
										<div>
											<select form="pt8">
												<option value="1" selected="selected">Builder</option>
												<option value="2">Singleton</option>
												<option value="3">Factory Method</option>
												<option value="4">Abstract Factory</option>
											</select>
										</div>
								</td>
							</tr>
						</table>
					</form>
					</article>
					<article>
						<form id="pt8b">
						<table style="text-align:center; vertical-align:top">
							<tr>
								<td style="height:100%;">
									<h5>c.</h5>
									<h1></h1>
									<img src="images/uml-singleton.png" style="height:200px;"/>
										<div>
											<select form="pt8">
												<option value="1" selected="selected">Abstract Factory</option>
												<option value="2">Singleton</option>
												<option value="3">Builder</option>
												<option value="4">Factory Method</option>
											</select>
										</div>
								</td>

								<td style="height:100%;">
									<h5>d.</h5>
									<h1></h1>
									<img src="images/uml-builder.png" style="height:200px;"/>
										<div>
											<select form="pt8">
												<option value="1" selected="selected">Factory Method</option>
												<option value="2">Abstract Factory</option>
												<option value="3">Singleton</option>
												<option value="4">Builder</option>
											</select>
										</div>
								</td>
							</tr>
						</table>
					</form>
					<p style="float:right; margin-top: 120px;">
						<a href="#"id="save8" class="btn">Revisar</a>
						<a href="#" data-slide="3" class ="end button" style="display:none;">Resultados »</a>
					</p>
					<span class="grade" id="grade8"></span>
					</article>
				</section>
			</div>

		</div>
	</div>

	<div class="slide" id="slide4" data-slide="3" data-stellar-background-ratio="0.5">
		<div class="container clearfix">

			<div id="content" class="grid_12">
				<table style="width:80%; margin:auto;">
					<tr>
						<td style="width:41%; border:none !important;">
							<span style="font-size:38px; height:50%; line-height:80px;">
								Puntos exitosos
							</span>
							<span id="success" style="font-size:70px; height:50%; line-height:80px;">

							</span>
						</td>
						<td rowspan="2" style="border:none; padding-top:70px; padding-left:100px;">
							<span id="final" style="font-size:200px; line-height:200px;font-weight:900px;"></span>
							<h1>Puntaje Final</h1>
						</td>
					</tr>
					<tr>
						<td style="border:none !important;">
							<span style="font-size:38px; height:50%; line-height:80px;">
								Puntos fallidos
							</span>
							<span id="failed" style="font-size:70px; height:50%; line-height:80px;">

							</span>
						</td>
					</tr>
				</table>
			</div>

		</div>
	</div>

	<!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->
	<script src='js/jquery-1.8.2.min.js'></script>
	<script src='js/jquery-ui.js'></script>
	<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
	<script type="text/javascript" src="js/waypoints.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/practice.js"></script>
	<script src='js/slides.js'></script>
	<!--link rel="stylesheet" type="text/css" href="styles.css"-->

	<!-- <script type="text/javascript" src="js/scripts.min.js"></script> -->
</body>
</html>
